<template>
  <div class="container">
    <h1>欢迎来到用户主页</h1>
    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <!-- 第一行轮播图 -->
      <div class="carousel-row">
        <div
          v-for="(item, index) in carouselItems.slice(0, 3)"
          :key="index"
          class="carousel-item"
          @click="goToPage(item.currentImage.route)"
        >
          <transition v-if="item.currentImage" name="fade" mode="out-in">
            <div class="carousel-content"> <!-- 包裹容器 -->
              <img
                :src="item.currentImage.src"
                :alt="item.currentImage.alt"
              />
              <div class="carousel-text">{{ item.currentImage.alt }}</div>
            </div>
          </transition>
        </div>
      </div>
      <!-- 第二行轮播图 -->
      <div class="carousel-row">
        <div
          v-for="(item, index) in carouselItems.slice(3, 6)"
          :key="index + 3"
          class="carousel-item"
          @click="goToPage(item.currentImage.route)"
        >
          <transition v-if="item.currentImage" name="fade" mode="out-in">
            <div class="carousel-content"> <!-- 包裹容器 -->
              <img
                :src="item.currentImage.src"
                :alt="item.currentImage.alt"
              />
              <div class="carousel-text">{{ item.currentImage.alt }}</div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserHome',
  data() {
    return {
      carouselItems: [
        {
          images: [
            { src: '/images/overview.png', route: '/incidentoverview', alt: '事件总览' },
            { src: '/images/overview.png', route: '/requestoverview', alt: '请求总览' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
        {
          images: [
            { src: '/images/new.png', route: '/newincident', alt: '新建事件' },
            { src: '/images/new.png', route: '/newrequest', alt: '新建请求' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
        {
          images: [
            { src: '/images/assign.png', route: '/incidentpickup', alt: '认领/分配事件' },
            { src: '/images/assign.png', route: '/requestpickup', alt: '认领/分配请求' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
        {
          images: [
            { src: '/images/mecreate.png', route: '/incidentopenedbyme', alt: '我创建的事件' },
            { src: '/images/mecreate.png', route: '/requestopenedbyme', alt: '我创建的请求' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
        {
          images: [
            { src: '/images/assignto.png', route: '/incidentassignedtome', alt: '分配给我的事件' },
            { src: '/images/assignto.png', route: '/requestassignedtome', alt: '分配给我的请求' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
        {
          images: [
            { src: '/images/report.png', route: '/incidentreportview', alt: '事件分析/报告生成-Incident' },
            { src: '/images/report.png', route: '/requestreportview', alt: '请求分析/报告生成-Request' },
          ],
          currentImageIndex: 0,
          currentImage: null,
        },
      ],
      interval: null,
    };
  },
  methods: {
    goToPage(route) {
      this.$router.push(route);
    },
    switchImage(item) {
      item.currentImageIndex = (item.currentImageIndex + 1) % item.images.length;
      item.currentImage = item.images[item.currentImageIndex];
    },
    startCarousel() {
      this.interval = setInterval(() => {
        this.carouselItems.forEach((item) => this.switchImage(item));
      }, 5000);
    },
    stopCarousel() {
      clearInterval(this.interval);
    },
  },
  mounted() {
    this.carouselItems.forEach((item) => {
      item.currentImage = item.images[item.currentImageIndex];
    });

    this.startCarousel();
  },
  beforeDestroy() {
    this.stopCarousel();
  },
};
</script>

<style scoped>

.container {
  margin-bottom: 120px;

}
.carousel-container {
  top: 180px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.carousel-row {
  display: flex;
  gap: 20px;
}

.carousel-item {
  position: relative;
  width: 225px;  
  cursor: pointer;
}

.carousel-content {
  position: relative;
  width: 100%;
}

.carousel-content img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 5px;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>